<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时钟</title>
</head>
<body>
 <p id="myclock" style="font-size: 24px"></p>
 <button id="startBtn">开始</button>
 <button id="stopBtn">停止</button>

 <script>
     var myclock =document.getElementById('myclock')
     var startBtn =document.getElementById('startBtn')
     var stopBtn =document.getElementById('stopBtn')

     //回调函数：把函数作为一个参数传到另一个函数中
     callback()

     var mytimer =setInterval(callback,1000);
     function callback(){
         //声明一个函数mydate 获取当前时间。
         var mydate =new Date();
         //接收获取到的时间，并输出到闭合标签内部
         myclock.innerHTML= mydate.getHours() + ":" +mydate.getMinutes() + ":" +mydate.getSeconds()
     }
     //添加启动事件
     startBtn.onclick =function (){
         if (mytimer == null){
             mytimer =setInterval(callback(),1000);
         }
     };
     //添加停止事件
     stopBtn.onclick =function (){
         clearInterval(mytimer)
         mytimer =null
     }
 </script>
</body>
</html>